<template>
  <div class="container">
    <!-- 仓库管理 -->
    <div class="search">
      <div class="search-item">
        <div class="title">承运商编号</div>
        <el-input v-model="search.code"/>
      </div>
      <div class="search-item">
        <div class="title">承运商名称</div>
        <el-input v-model="search.name"/>
      </div>
      <div class="search-item">
        <div class="title">联系人</div>
        <el-input v-model="search.ownerName"/>
      </div>
      <div class="search-item" style="display:flex;flex-direction: row;align-self:center;margin-top:8px">
        <el-button class="el-button1" @click="searchBtn">搜索</el-button>
        <el-button class="el-button2" @click="resetBtn">重置</el-button>
      </div>
    </div>
    <div class="form">
      <!-- <div class="btn"> -->
        <!-- <el-button @click="$router.push({name:'goods-owner-add',params:{ id:'null'} })">新增货主</el-button> -->
        <!-- <el-button class="other right" style="width:unset"><a id="aaa" href="http://www-wms-java.itheima.net/template/locationTemplate.xlsx">下载库区模版</a></el-button>
        <el-button class="other" style="width:unset" @click="DiaExcel=true">导入库区信息</el-button> -->
      <!-- </div> -->
      <!-- :row-style="{height: '44px'}" :cell-style="{padding: '0'}" -->
      <el-table :data="tableData.records" border :cell-style="{padding: '0',height:'44px'}" max-height="400" >
        <el-table-column align="center" type="index" label="序号" width="50" max-height="44"/>
        <el-table-column align="center" prop="code" label="承运商编号" min-width="150"/>
        <el-table-column align="center" prop="name" label="承运商名称" min-width="150"/>
        <el-table-column align="center" prop="personName" label="联系人" min-width="150"/>
        <el-table-column align="center" prop="phone"  label="联系人电话" min-width="199"/>
        <el-table-column align="center" prop="email" label="联系邮箱" min-width="150"/>
                                    <!--  :formatter="(a,b,c)=>(c==='BCL'?'不处理':c==='QJ'?'全检':'抽检')" -->
        <el-table-column align="center" prop="location" label="省市区" min-width="300"/>
        <el-table-column align="center" prop="address" label="详细地址" min-width="150"/>
        <el-table-column align="center" prop="updateTime" label="更新时间" min-width="199"/>
      </el-table>
        <!-- 分页组件 -->
        <PageTool
        v-if="tableData.total>10"
        :total="tableData.total"
        :paginationPage="tableData.current"
        :paginationPagesize="tableData.size"
        @pageSizeChange="pageSizeChange"
        @pageChange="pageChange"
        style="height:60px ;margin-top:10px"
        />
    </div>
  </div>
</template>

<script>
import { getlist, del } from '@/api/task-picking'
export default {
  name: 'task-picking',
  data () {
    return {
      search: {
        id: '',
        like_code: '', // 货主编号
        like_name: '', // 货主名称
        like_personName: '', // 联系人
        size: '10', // 一条几条
        current: '1' // 当前页
      },
      tableData: [],
      value: 0,
      DiaExcel: false,
      filelist: []
    }
  },
  created () {
    console.log(1)
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data } = await getlist(this.search)
      console.log(data)
      this.tableData = data
    },
    edit (row) { // 编辑=路由传递 库区的id
      console.log(row)
      this.$router.push({ name: 'goods-owner-add', params: { id: row.id } })
    },
    searchBtn () {
      this.getlist()
    },
    resetBtn () {
      this.search = {
        id: '',
        like_code: '', // 货主编号
        like_name: '', // 货主名称
        like_personName: '', // 联系人
        size: '10', // 一条几条
        current: '1' // 当前页
      }
    },
    pageSizeChange (size) {
      this.search.size = size
      this.getlist()
    },
    pageChange (page) {
      this.search.current = page
      this.getlist()
    },
    async del (id) {
      console.log(id)
      try {
        await this.$confirm('确定要删除吗?')
        await del(id)
        this.$message.success('删除成功')
        this.getlist()
      } catch (e) {
        console.log(e.response.data.$message)
      }
    },
    checkdetail (row) { // 查看详情
      this.$router.push({ name: 'goods-owner-detail', params: { id: row.id } })
    },
    onChange (file) {
      console.log(file)
      // this.filelist = file
    }
  },
  mounted () {
  }

}
</script>

<style lang="scss" scoped>
.container {
 min-width: 100%;
 height: 100%;
}
  .search{
    height: 148px;
    width: 100%;
    padding: 30px;
    margin-bottom:20px;
    display: flex;
    justify-content: space-evenly;
    // background-color: pink;
    background-color: #fff;
    box-shadow: 3px 3px  10px gray;
    border-radius: 10px;
    ::v-deep .search-item{
     width: 22%;
    //  background-color: green;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     .title{
      font-size: 12px;
      color: #887e7e;
      margin-bottom:10px;

     }
     .el-input__inner{
      height: 40px;
      width: 100%;
      // background-color:#e51414 !important;
     border-radius: 10px;
      background-color:#f8f5f5 ;
     }
     .el-input__inner:hover{
      background-color:#f8f5f5 ;
      border: 1px solid #887e7e;
     }
     .el-input__inner:focus{
      border: #ffb200 1px solid ;
     }
     .el-button{
      width:80px;
      height: 40px;
      // background-color: #ffb200;
      border: none;
      border-radius: 30px;
     }
     .el-button.el-button1{
      background-color:#ffb200
     }
     .el-button.el-button1:hover{
      background-color: #e75d22;
      color: black;
     }
    .el-button.el-button2{
      background-color:#f8f5f5

    }
     .el-button.el-button2:hover{
      background-color: #ffb200;
      color: black;
     }

    }
  }
  .form{
    width: 100%;
    // background-color:yellowgreen;
    background-color: #fff;
    box-shadow: 3px 3px  10px gray;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
   .btn{
    padding:0px 26px;
    margin: 20px  0px  20px  0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // height:40px;
    // background-color: pink;
    margin-top: 26;
     .el-button{
      width: 10%;
      background-color: #00be76;
      color: #fff;
      border: none;
      border-radius: 30px;
      // align-self:flex-end
    }
    .el-button:hover{
      background-color: #007a4c;
    }
    .el-button.other:hover{
      background-color: #ffb200;
      color: #2b2929;
    }
    .el-button.other.right{
      margin-left:auto;
    }

}
      ::v-deep .el-table tr>td span {
        color: #ffb200;
      }
    ::v-deep tbody tr:hover>td,::v-deep tbody tr.hover-row>td {
      background-color:#efca74 ;
      color:black;
      span{
      color:black;
      }
      }
    //  ::v-deep .el-table tr:hover>td{
    //    color:black !important;
    //   background-color:#efca74 !important;
    //   &tr:hover td span {
    //   }
    //  }
     ::v-deep .el-table tr>th {
      background-color:#efcd7f83 !important;
      color:#2b2929!important
     }
     ::v-deep .el-table__fixed-right {
      height: 100% !important; //设置高优先，以覆盖内联样式
    }

  }
  .el-select-dropdown__item.selected{
    color:black;
    font-weight: normal;
  }
    .el-select-dropdown__item.hover{
    background-color: rgba(241, 201, 127, 0.3);
  }

</style>
